<template>
	<view class="container">

		<z-paging ref="paging" v-model="goodList" @query="getListAPP" :fixed='false' :height='(windowHeight)+"px"'>
			<!-- <u-sticky> -->
			<view slot="top">
				<view class="searchBar">
					<u-search placeholder="搜索商品" v-model="keyword" class="search" shape="square" bgColor='#EDEDED'
						:actionStyle="{'background-color':'#EA5404','color':'#ffffff','padding':'10rpx','border-radius':'4rpx'}"
						@clear="clearTouched" @custom="searchTouched"></u-search>
				</view>

			</view>
			<!-- </u-sticky> -->
			<!-- 商品列表 -->
			<div class="goods-list">
				<div @click="goodsDetail(item)" class="goods-item" v-for="(item, item_index) in goodList"
					:key="item_index">
					<div class="goods-img">
						<u-image :src="item.productImgurl" height='325rpx' mode="aspectFill" width="100%"
							style='background-color: #e5e5e588;'>
							<u-loading-icon slot="loading"></u-loading-icon>
						</u-image>
					</div>
					<div class="goods-desc">
						<div class="goods-title">
							{{ item.productName }}
						</div>
						<div class="goods-bottom">
							<div class="goods-price" v-if="item.price">{{ item.price }}</div>
							<div class="goods-price" v-else>￥{{ unitPrice }}</div>
							<div style='margin-left: 20rpx;' class="goods-price_1" v-if="item.oldPrice">
								{{ item.oldPrice | unitPrice }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</z-paging>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@/manager/network-manager.js")
	const dialog = require("@/utils/dialog.js")
	export default {
		data() {
			return {
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight,
				title: '',
				categoryId: '',
				keyword: '',
				unitPrice: 0,
				goodList: []
			}
		},
		onReachBottom() {
			console.log('触底了')
		},

		onLoad(options) {
			var that = this
			that.title = options.name
			if (options.categoryId) {
				that.categoryId = options.categoryId
			}
			uni.setNavigationBarTitle({
				title: that.title
			})


		},
		onReady() {
			var that = this
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: that.title
				})
			}, 400)
		},
		onShow() {
			var that = this
			this.$nextTick(function() {
				that.$refs.paging.reload();
			})
		},
		methods: {
			searchTouched() {
				this.$refs.paging.reload();
			},
			clearTouched() {
				this.$refs.paging.reload();
			},
			//查询商城商品列表（APP）
			getListAPP: function(pageNo, pageSize) {
				var that = this
				var url;
				if (that.title == '秒杀') {
					url = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLSECKILL_GETSECKILLLISTAPP
				} else if (that.title == '搜索商品') {
					url = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLPRODUCTS_GETLISTAPP
				} else {
					url = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLPRODUCTS_GETLISTAPP
				}
				var params = {
					categoryId: that.categoryId,
					keyword: that.keyword,
					pageNum: pageNo,
					pageSize: pageSize

				};
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						that.goodList = res.data.list
						that.$refs.paging.complete(that.goodList);
					}
				})
			},


			goodsDetail: function(e) {
				if (this.title == '秒杀') {
					uni.navigateTo({
						url: '/module_mall/goodsDetail/goodsDetail?goodid=' + e.id + '&isSeckill=true'
					})
				} else {
					uni.navigateTo({
						url: '/module_mall/goodsDetail/goodsDetail?goodid=' + e.id
					})
				}

			}
		}
	}
</script>
<style>
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.searchBar {
		padding: 40rpx;
	}

	// 商品列表
	.goods-list-title {
		width: 141rpx;
		height: 28rpx;
		margin-top: 50rpx;
		margin-bottom: 32rpx;
		background-color: #EA5404;
	}

	.goods-list {
		// margin-top: 34rpx;
		width: 670rpx;
		display: flex;
		margin-left: 40rpx;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods-item {
			// width: 48%;
			width: 325rpx;
			margin-bottom: 10px;
			border-radius: 8rpx;
			overflow: hidden;

			// background-color: aqua;

		}

		.goods-img {
			position: relative;
			margin: 0 auto;
			width: 100%;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.goods-desc {
			border-bottom-left-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			width: 100%;
			background: #fff;
			margin: 0 auto;

			.goods-title {
				padding: 10rpx 10rpx 6rpx 10rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				height: 64rpx;
				font-weight: 400;
				overflow: hidden;
				/* #ifndef APP-PLUS-NVUE */
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				/*设置超过为省略号的行数*/
				overflow: hidden;
				text-align: justify;
				/* #endif */
				/* #ifdef APP-PLUS-NVUE */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 2;
				/* #endif */
			}

			.goods-bottom {
				padding-left: 10rpx;
				padding-right: 10rpx;
				padding-bottom: 10rpx;
				display: flex;
				align-items: center;

				.goods-price {
					font-size: 24rpx;
					line-height: 28rpx;
					color: #EA5404;
				}

				.goods-price_1 {
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 28rpx;
					text-decoration-line: line-through;
					color: #ADB0AE;
				}

				.goods-way {
					margin-left: 28rpx;
					width: 120rpx;
					height: 28rpx;
					border: 1px solid #3D3A3A;
					border-radius: 2px;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #3D3A3A;
				}
			}
		}

		.goods-icon {
			right: 10rpx;
			top: 10rpx;
			position: absolute;
		}
	}
</style>
